<!--
 * @Author: wanlixin
 * @Date: 2019-10-04 19:41:52
 * @LastEditors: wanlixin
 * @LastEditTime: 2019-10-04 19:41:52
 * @Description: 
 -->
<template>
  <grimm-page type="button-view" title="switch">
    <template slot="content">
      <div>
        <h1 class="example-page-title">默认样式</h1>
        <grimm-switch
          v-model="checked1"
          :name="optionValue.value"
          :onChangeAfter="onChangeAfter"
        >swtich</grimm-switch>
        <h1 class="example-page-title">disabled</h1>
        <grimm-switch
          v-model="checked2"
          disabled
          :name="optionValue.value"
          :onChangeAfter="onChangeAfter"
        >swtich1</grimm-switch>
        <grimm-switch
          v-model="checked3"
          disabled
          :name="optionValue.value"
          :onChangeAfter="onChangeAfter"
        >swtich2</grimm-switch>
        <h1 class="example-page-title">block 样式</h1>
        <grimm-switch
          v-model="checked4"
          fix="prefix"
          :name="optionValue.value"
          :onChangeAfter="onChangeAfter"
          display
        >swtich1</grimm-switch>
        <grimm-switch
          v-model="checked5"
          fix="prefix"
          :name="optionValue.value"
          :onChangeAfter="onChangeAfter"
          display
        >swtich2</grimm-switch>
      </div>
    </template>
  </grimm-page>
</template>

<script>
import GrimmPage from 'example/components/GrimmPage.vue';
export default {
  data() {
    return {
      checked1: '1',
      checked2: '',
      checked3: '1',
      checked4: '',
      checked5: '1',
      optionValue: {
        label: 'Option Checkbox',
        value: '1',
      },
    };
  },
  methods: {
    onChangeAfter(vals, opts) {},
  },
  components: {
    GrimmPage,
  },
};
</script>
